<template>
    <div class="dashboard-container">
        <!-- 筛选查询 -->
        <el-form :inline="true">
            <el-form-item label="套餐类型">
                <el-select v-model="params.menuType" placeholder="请选择" @change="getList" clearable>
                    <el-option
                        v-for="item in MENU_LIST"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="params.status" placeholder="请选择" @change="getList" clearable>
                    <el-option
                        v-for="item in ORDER_LIST"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
        </el-form>
        

        <!-- 数据列表 -->
        <el-table :data="list" v-loading="loading">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="用户昵称" prop="createUser.nickName"></el-table-column>
            <el-table-column label="手机" prop="createUser.phone"></el-table-column>
            <el-table-column label="单号" prop="serialNo" width="200px"></el-table-column>
            <el-table-column label="支付金额" prop="payAmount"></el-table-column>
            <el-table-column label="支付方式" prop="payTypeName"></el-table-column>
            <el-table-column label="套餐类型" prop="menuTypeName"></el-table-column>
            <el-table-column label="套餐数量" prop="menu.count"></el-table-column>
            <el-table-column label="订单状态" prop="statusName"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="padding-top:30px; text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageIndex+1"
                background
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageCount"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>


    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { forbiddenPhoneCreate, forbiddenPhoneGetList, forbiddenPhoneDelete } from '@/api/forbiddenPhone'
  import { MENU_LIST, ORDER_LIST, PAY_TYPE_LIST } from '@/utils/common'
  import { transfromData } from '@/utils/tools'
  import { orderGetlist } from '@/api/order'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        MENU_LIST,
        ORDER_LIST,
        PAY_TYPE_LIST,
        list: [],
        params: {
            pageCount: 10,
            pageIndex: 0,
            type: 0,
            status: '',
            menuType: ''
        },
        total: 0,
        dialogVisible: false,
        temp:{},
        rules: {
            count: [{ required: true, message: '请输入次数', trigger: 'blur' }],
            price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        },
        loading: false
      }
    },
    mounted(){
        this.getList();
    },
    methods: {
        async getList(){
            this.loading = true;
            let data = await orderGetlist(this.params)
            this.loading = false
            this.list = data.data.list.map(item=>{
                item.menuTypeName = transfromData(MENU_LIST, item.menuType)
                item.statusName = transfromData(ORDER_LIST, item.status)
                item.payTypeName = transfromData(PAY_TYPE_LIST, item.payType)
                
                return item;
            })
            this.total = data.data.totalCount
        },
        //切换数量
        handleSizeChange(val){
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getList();
        },
        //切换页码
        handleCurrentChange(val){
            this.params.pageIndex = val-1;
            this.getList();
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  